<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  <title>串口测试工具</title>
  <style type="text/css">
      .input-group{margin-bottom: 10px;}
      .btn-l{width: 120px;margin: 10px 50px 20px 0;}
      .btn-r{width: 120px; margin: 10px 0 20px 0;}
      .setup-btn{
        text-align: center;
      }
      h3{margin: 100px 0 20px 20px;}
      .output{
        /*width: 500px;*/
        resize:none;
      }
  </style>
</head>
<body>
    <div class="container" >
        <h3>串口调试助手</h3>
        <div class="col-lg-4 col-md-4 col-sm-8">
            <div class="input-group">
              <span class="input-group-addon">串口号：</span>
              <select class="form-control" id="ckh">
                   <option value="*">选择COM口</option>
              </select>
            </div>
            <div class="input-group">
                <span class="input-group-addon">波特率：</span>
                <select class="form-control" id="btl">
                    <option value="4800">4800</option>
                    <option value="9600">9600</option>
                    <option value="19200">19200</option>
                    <option value="38400">38400</option>
                    <option value="56000">56000</option>
                    <option value="115200">115200</option>
                </select>
            </div>
            <div class="input-group">
                <span class="input-group-addon">校验位：</span>
                <select class="form-control" id="jy">
                      <option value="0">无</option>
                      <option value="1">奇</option>
                      <option value="2">偶</option>
                </select>
            </div>
            <div class="input-group">
                 <span class="input-group-addon">数据位：</span>
                 <select class="form-control" id="sj">
                         <option value="8">8位</option>
                         <option value="9">9位</option>
                 </select>
            </div>
            <div class="input-group">
                <span class="input-group-addon">停止位：</span>
                <select class="form-control" id="tz">
                      <option value="1">1</option>
                      <option value="2">2</option>
                </select>
            </div>
            <div class="setup-btn">
                <button type="button" class="btn btn-l btn-primary" onclick="searchCom()">扫描可用COM口</button>
                <button type="button" class="btn btn-r btn-success" id="open" onclick="option()">打开串口</button>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-8">
            <textarea class="form-control output" id="output" rows="11"></textarea>
            <div class="row">
                <div class="input-group">
                  <input type="text" id="input" class="form-control" placeholder="输入要发送的内容">
                  <span class="input-group-btn">
                    <button class="btn btn-info" type="button" onclick="sendData()">发 送</button>
                  </span>
                </div><!-- /input-group -->
            </div><!-- /.row -->
        </div>

    </div>

</body>
<script type="text/javascript">
    var ws = null;
    var msgObj = null;
    var status = true;
    var param = {header:"send",message:""}
    window.onload = function WebSocketTest(){
         if ("WebSocket" in window){
               // 打开一个 web socket
               ws = new WebSocket("ws://localhost:8080/websocket");
               ws.onopen = function(){
                  console.log("本地服务连接成功！");
               };
               ws.onmessage = function (evt){
                  msg = evt.data;
                  console.log("收到消息=>"+msg);
                  msgObj = JSON.parse(msg);
                  if (msgObj !== null && msgObj !== undefined){
                      message(msgObj);
                  }
               };

               ws.onclose = function(){
                  // 关闭 websocket
                  console.log("连接已关闭...");
               };
            }
           else
            {
               alert("您的浏览器不支持 WebSocket!");
            }
         }
   function searchCom(){
        param.header = "search";
        ws.send(JSON.stringify(param));
   }

    function option(){
        var paramOpen = {header:"open"}
        if(status === true || status ==="true"){
            if ($("#ckh").val() == "*"){
                alert("请选择串口号，如果没有请先点击扫描Com口！")
                return;
            }
            console.log("打开中。。。。")
            $("#open").text("关闭串口");
            paramOpen.port = $("#ckh").val();
            paramOpen.baudRate = $("#btl").val();
            paramOpen.checkoutBit = $("#jy").val();
            paramOpen.dataBit = $("#sj").val();
            paramOpen.stopBit = $("#tz").val();
            ws.send(JSON.stringify(paramOpen));
            status = false;
        }else {
            console.log("关闭中。。。。")
            $("#open").text("打开串口");
            param.header = "close"
            status = true;
            ws.send(JSON.stringify(param));
        }
     }

     function sendData() {
       var input = $("#input").val();
       if (input === "" || input === null || input===" "){
           alert("请输入内容！");
       }else if (status === "true" || status === true){
           alert("请先打开串口！");
       }else {
           console.log("发送消息=>"+input);
           param.header = "send";
           param.message = input.toString();
           ws.send(JSON.stringify(param));
       }
     }
     function message(msg){
        if(msg.code == 200){
            console.log(msg.message);
        }else if(msg.code == 201){
             $("#ckh option:gt(0)").remove();
             for(var i = 0; i < msg.message.length; i++){
             	$("#ckh").append("<option value="+msg.message[i]+">"+msg.message[i]+"</option>");//新增
             }
        }else if(msg.code == 204){
            $("#output").val($("#output").val()+"\r\n发送=>  "+$("#input").val()+"\r\n"+msg.message+"\r\n");
        }else if(msg.code == 400){
            alert(msg.message);
        }
     }
</script>
</html>